<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <title>空间详情</title>
    <link rel="stylesheet" href="../app/css/html5.css">
    <script src="../app/js/zepto.min.js"></script>
    <script src="../app/js/html5.js"></script>
</head>

<body ontouchstart>
<style>
    body{background: #f5f5f5;}
    .slide_block{background: #fff;}
    .slider {width: 100%;overflow: hidden;position: relative;padding-top: 45.83%;}
    .ui-slider-indicators li{width: 9px;height: 9px;background-color: rgba(7,12,16,.6);margin-right: 9px;}
    .ui-slider-indicators li.current:before{left:0px; top:0px;width: 9px;height: 9px;background-color: rgba(7,12,16,.9);border-radius: 11px;margin-right: 9px;}
    .ui-slider-indicators{-webkit-box-pack: center;}
    .khead{margin: 4px 18px;}
    .khead h2{font-size: 14px;color: #111111;margin-bottom: 4px;}
    .khead p{font-size: 13px;color: #828282;line-height:17px;margin-bottom: 4px;}
    .kmore{text-align: center;height: 26px;border-bottom: 1px solid #dfdfdf;margin: 0 18px;}
    .ui-nowrap-multi{-webkit-line-clamp:3}
    .kaddress,.ktel{border-bottom: 1px solid #dfdfdf;margin: 0 18px;height: 38px;font-size: 12px;color:#111111;background: url('../app/img/icon02.png') no-repeat;background-size: 13px;background-position: 0px 12px;line-height: 36px;padding-left: 20px;}
    .ktel{background: url('../app/img/icon05.png') no-repeat;background-size: 13px;background-position: 0px 11px;}
    .karea{border-bottom: 1px solid #dfdfdf;margin: 0 18px;height: 38px;}
    .karea .ui-tiled li{text-align: center;font-size: 12px;color:#111111;line-height: 23px;margin-top: 7px;}
    .ktype{border-bottom: 1px solid #dfdfdf;margin: 10px 18px;margin-bottom:0px;font-size: 12px;color:#111111;}
    .ktype h2{background: url('../app/img/icon06.png') no-repeat;background-size: 13px;background-position: 0px 3px;font-size: 12px;color:#111111;padding-left: 20px;margin-bottom: 10px;}
    .ktype .btn,.ktype .btn2{display: table;padding-left: 20px;margin-bottom: 13px;}
    .ktype .btn li{float:left;width: 53px;height: 22px;font-size: 12px;color: #111111;border: 1px solid #111111;border-radius: 8px;margin-right: 17px;margin-bottom: 10px; text-align: center;line-height: 20px;}
    .ktype .btn2 li{float:left;width: 50px;height: 22px;font-size: 11px;color: #111111;border-radius: 8px;margin-right: 17px; text-align: center;line-height: 20px;}
    .ktype .btn2 li.no-mr{margin-right: 0px;}
    .ktype2{margin: 0;padding:10px 18px;padding-bottom: 0px;}
    .links{width: 75%;height: 30px;line-height: 30px;margin: 30px auto 0 auto;background: #080c0f;border-radius: 6px;text-align: center;}
    .links a{font-size: 14px;color: #fff;display: block;}
</style>

<section class="ui-container">
    <section id="slider">
        <div class="slide_item">
            <div class="slide_block">
                <div class="slider">
                    <ul class="ui-slider-content" style="width: 100%">
                        <c:if test="${bean.displayPicture != null && bean.displayPicture != ''}">
                            <li><span style="background-image:url(${bean.displayPicture});background-size: 100%"></span></li>
                        </c:if>
                        
                        <c:if test="${bean.displayPicture2 != null && bean.displayPicture2 != ''}">
                            <li><span style="background-image:url(${bean.displayPicture2});background-size: 100%"></span></li>
                        </c:if>
                        <c:if test="${bean.displayPicture3 != null && bean.displayPicture3 != ''}">
                            <li><span style="background-image:url(${bean.displayPicture3});background-size: 100%"></span></li>
                        </c:if>
                    </ul>
                </div>
                <div class="khead">
                    <h2>${bean.spaceName}</h2>
                    <p class="k_desc ui-nowrap-multi">${bean.introduction}</p>
                </div>
                <div class="kmore"><img src="../app/img/icon04.png" width="13" height="9" /></div>

                <div class="kaddress ui-nowrap ui-whitespace">${bean.address}</div>
                <div class="ktel">${bean.contactNumber}</div>
                <div class="karea">
                    <ul class="ui-tiled">
                        <li style="border-right: 1px solid #dfdfdf;">可容纳${bean.seatCount}人</li>
                        <li>${bean.spaceArea}m²</li>
                    </ul>
                </div>
                <div class="ktype">
                    <h2>房屋类型</h2>
                    <ul class="btn">
                    	<c:forEach var="roomType" items="${bean.roomTypes}">
					  		<li>${roomType.roomTypeName}</li>
					  	</c:forEach>
                    </ul>
                </div>
                <div class="ktype ktype2">
                    <h2>配套设施</h2>
                    <ul class="btn2">
                        ${bean.otherFacilities}
                        <%--<li>娱乐区域</li>
                        <li>公共前台</li>
                        <li>会议室</li>
                        <li>免费咖啡</li>
                        <li class="no-mr">休息区域</li>
                        <li>复印打印</li>
                        <li>高速网络</li>--%>
                    </ul>
                </div>
                <div class="links" style="display: none;">
                    <a href="/euc/page/wx/reservation.html?space_id=${bean.id}&">预约参观</a>
                </div>
            </div>
            <script>
                (function (){
                    var slider = new fz.Scroll('.slider', {
                        role: 'slider',
                        indicator: true,
                        autoplay: true,
                        interval: 3000
                    });

                    slider.on('beforeScrollStart', function(fromIndex, toIndex) {
                        console.log(fromIndex,toIndex)
                    });

                    slider.on('scrollEnd', function(cruPage) {
                        console.log(cruPage)
                    });
                    $(".kmore").click(function () {
                        $(".k_desc").toggleClass("ui-nowrap-multi");
                    })
                })();
            </script>
        </div>
    </section>
    <section id=""></section>
</section>
<script>
    function getQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        var reg_rewrite = new RegExp("(^|/)" + name + "/([^/]*)(/|$)", "i");
        var r = window.location.search.substr(1).match(reg);
        var q = window.location.pathname.substr(1).match(reg_rewrite);
        if(r != null){
            return unescape(r[2]);
        }else if(q != null){
            return unescape(q[2]);
        }else{
            return null;
        }
    }

    var wx = getQueryString("wx");
    if(wx == 1) $(".links").show();

</script>
</body>
</html>